<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>流水分析</title>
    <meta charset="UTF-8">
</head>
<body>
<div style="width: 100%;text-align: center"><strong>本年流水分析</strong></div>

<div id="main" style="width: 100%;height: 100%;"></div>
<script src="<%=request.getContextPath()%>/resources/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/echarts.min.js"></script>
<script type="text/javascript">
    $(function () {
        var dom = document.getElementById("main");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;

    $.post(
        //传递服务器路径
        "<%=request.getContextPath()%>/eCharServlet",
        //传递提交到服务器的参数
        "method=getEChar",
        //回调函数,服务器响应成功,调用函数
        //服务器响应回来的数据,传递到函数的参数
        function (data) {
            var o = data.obj;
            option = {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source:
                    //     [
                    //     ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    //     ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                    //     ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                    //     ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                    //     ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                    // ]
                        [
                        ['product', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        ['未付款', o[0][0], o[0][1], o[0][2], o[0][3], o[0][4], o[0][5], o[0][6], o[0][7], o[0][8], o[0][9], o[0][10], o[0][11]],
                        ['已付款', o[1][0], o[1][1], o[1][2], o[1][3], o[1][4], o[1][5], o[1][6], o[1][7], o[1][8], o[1][9], o[1][10], o[1][11]],
                        ['已完成', o[2][0], o[2][1], o[2][2], o[2][3], o[2][4], o[2][5], o[2][6], o[2][7], o[2][8], o[2][9], o[2][10], o[2][11]]
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {gridIndex: 0},
                grid: {top: '55%'},
                series: [
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        label: {
                            formatter: '{b}: {@一月} ({d}%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '一月',
                            tooltip: '一月'
                        }
                    }
                ]
            };

            myChart.on('updateAxisPointer', function (event) {
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value + 1;
                    myChart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });

            myChart.setOption(option);

        },
        //服务器响应的数据格式
        "json"
    )
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    });
</script>
</body>
</html>
